<template>
  <div>
    <div class="authenticate_status" :class="{ fail: Number(detailObj.status) === 3 }">
      <div class="name_box">
        <div class="name">{{ detailObj.enterpriseName }}</div>
        <div class="no_status wait_status" v-if="Number(detailObj.status) === 0">未认证</div>
        <div class="wait_status" v-else-if="Number(detailObj.status) === 1">审核中</div>
        <div class="success_status" v-else-if="Number(detailObj.status) === 2">
          <img src="@/assets/authenticate/success_status.png" alt="" class="success_icon">
          已认证
        </div>
        <div class="fail_status" v-else-if="Number(detailObj.status) === 3">
          <img src="@/assets/icons/fail_status.png" alt="" class="fail_icon">
          <div class="fail_back">认证驳回</div>
          <div class="text" v-if="detailObj.remark">处理意见：{{ detailObj.remark }}</div>
        </div>
      </div>
      <el-button
        type="primary"
        class="btn"
        @click="gotoAuthenticateEditPage"
        v-if="Number(detailObj.status) === 3 || Number(detailObj.status) === 2"
      >{{ this.pageType === 'edit' ? '重新' : '变更' }}认证</el-button>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        企业基础信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.businessPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.businessPic)"></i>
              </div>
            </div>
            <div class="name">企业营业执照</div>
          </div>
        </div>
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">企业名称：</div>
                <div class="value">{{ detailObj.enterpriseName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">统一社会信用代码：</div>
                <div class="value">{{ detailObj.creditCode }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">法定代表人：</div>
                <div class="value">{{ detailObj.legal }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">注册资本：</div>
                <div class="value">1{{ detailObj.registered }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">注册地址：</div>
                <div class="value">{{ detailObj.address }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">成立日期：</div>
                <div class="value">{{ detailObj.establishedDate }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">有限期限：</div>
                <div class="value">
                  {{ detailObj.limited === '1' ? '' : detailObj.limited }}
                  <el-checkbox
                    v-if="detailObj.limited === '1'"
                    :disabled="true"
                    :value="true"
                    class="long_effect"
                  >长期有效</el-checkbox>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">公司类型：</div>
                <div class="value">{{ detailObj.enType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">公司性质：</div>
                <div class="value">{{ detailObj.property }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">行业分类：</div>
                <div class="value">{{ detailObj.industry }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">公司电话：</div>
                <div class="value">{{ detailObj.companyPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">办公地址：</div>
                <div class="value">{{ detailObj.officeAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <div class="msg_line last">
                <div class="key">企业经营范围：</div>
                <div class="value">{{ detailObj.bfanwei }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod" v-if="detailObj.enterpriseBank">
      <div class="title">
        <i class="icon"></i>
        企业银行账户
      </div>
      <div class="content">
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户名称：</div>
                <div class="value">{{ detailObj.enterpriseBank.accountName || '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">银行账号：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankNumber || '' }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户银行：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankDeposit || '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户行所在地：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankProvinces || '' }}/{{ detailObj.enterpriseBank.bankCities || '' }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户支行：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankBranch || '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">大额行号（联行号）：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankCode || '' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        企业法人信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.frContactRPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.frContactRPic)"></i>
              </div>
            </div>
            <div class="name">身份证人像面</div>
          </div>
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.frContactBPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.frContactBPic)"></i>
              </div>
            </div>
            <div class="name">身份证国徽面</div>
          </div>
        </div>
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">法人姓名：</div>
                <div class="value">{{ detailObj.frContactName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件类型：</div>
                <div class="value">{{ detailObj.frContactType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">身份证号：</div>
                <div class="value">{{ detailObj.frContactId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">性别：</div>
                <div class="value">{{ detailObj.frContactSex }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">民族：</div>
                <div class="value">{{ detailObj.frContactEthnic }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">签发机关：</div>
                <div class="value">{{ detailObj.frContactIssuing }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">出生日期：</div>
                <div class="value">{{ detailObj.frContactBirth }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件起始日期：</div>
                <div class="value">{{ detailObj.frContactCardStart }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件到期日期：</div>
                <div class="value">
                  {{ detailObj.frContactCardEnd === '1' ? '' : detailObj.frContactCardEnd }}
                  <el-checkbox
                    v-if="detailObj.frContactCardEnd === '1'"
                    :disabled="true"
                    :value="true"
                    class="long_effect"
                  >长期有效</el-checkbox>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">户籍地址：</div>
                <div class="value">{{ detailObj.frContactAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">手机号码：</div>
                <div class="value">{{ detailObj.frContactPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">法人邮箱：</div>
                <div class="value">{{ detailObj.frContactEmail }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        企业管理员信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.adminOperation.contactRPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.adminOperation.contactRPic)"></i>
              </div>
            </div>
            <div class="name">身份证人像面</div>
          </div>
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.adminOperation.contactBPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.adminOperation.contactBPic)"></i>
              </div>
            </div>
            <div class="name">身份证国徽面</div>
          </div>
        </div>
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">姓名：</div>
                <div class="value">{{ detailObj.adminOperation.contactName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件类型：</div>
                <div class="value">{{ detailObj.adminOperation.contactType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">身份证号：</div>
                <div class="value">{{ detailObj.adminOperation.contactId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">性别：</div>
                <div class="value">{{ detailObj.adminOperation.contactSex }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">民族：</div>
                <div class="value">{{ detailObj.adminOperation.contactEthnic }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">签发机关：</div>
                <div class="value">{{ detailObj.adminOperation.contactIssuing }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">出生日期：</div>
                <div class="value">{{ detailObj.adminOperation.contactBirth }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件起始日期：</div>
                <div class="value">{{ detailObj.adminOperation.contactCardStart }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件到期日期：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactCardEnd === '1' ? '' : detailObj.adminOperation.contactCardEnd }}
                  <el-checkbox
                    v-if="detailObj.adminOperation.contactCardEnd === '1'"
                    :disabled="true"
                    :value="true"
                    class="long_effect"
                  >长期有效</el-checkbox>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">户籍地址：</div>
                <div class="value">{{ detailObj.adminOperation.contactAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">手机号码：</div>
                <div class="value">{{ detailObj.adminOperation.contactPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">邮箱：</div>
                <div class="value">{{ detailObj.adminOperation.contactEmail }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod" v-if="detailObj.signaturePic || detailObj.adContactCorporate">
      <div class="title">
        <i class="icon"></i>
        附件信息
      </div>
      <div class="content">
        <div class="img_list last">
          <div class="img_item" v-if="detailObj.signaturePic">
            <div class="sign_box">
              <img src="@/assets/authenticate/pdf.png" alt="" class="img" />
              <div class="mask">
                <a class="el-icon-search" :href="baseURL + detailObj.signaturePic" target="_blank" alt=""></a>
              </div>
            </div>
            <div class="name">电子签名认证授权委托书</div>
          </div>
          <div class="img_item" v-if="detailObj.adContactCorporate">
            <div class="sign_box">
              <img src="@/assets/authenticate/pdf.png" alt="" class="img" />
              <div class="mask">
                <a class="el-icon-search" :href="baseURL +  detailObj.adContactCorporate" target="_blank" alt=""></a>
              </div>
            </div>
            <div class="name">法人授权委托书</div>
          </div>
        </div>
      </div>
    </div>
    <CustomDialog
      title="查看内容"
      width="70%"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <div class="mask_dialog_content">
        <div class="img_box">
          <img :src="baseURL + previewBigImgUrl" alt="" class="img" />
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import { getCompanyMsg } from '@/api/production'
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    CustomDialog,
  },
  props: {
    pageType: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      // 状态 0：未认证 1：等待审核 2：已认证 3：认证失败
      detailObj: {
        enterpriseBank: {},
        adminOperation: {}
      },
      dialogVisible: false,
      previewBigImgUrl: '',
    }
  },
  mounted() {
    this.getCompanyMsg() // 根据登录人即可获取，不需要传参
  },
  methods: {
    getCompanyMsg(){
      getCompanyMsg().then((res) => {
        this.detailObj = res.data
      })
    },
    previewBigImg(url) {
      this.previewBigImgUrl = url
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.previewBigImgUrl = ''
    },
    // 编辑认证
    gotoAuthenticateEditPage() {
      this.$router.push({
        path: '/authenticate/add',
        query: {
          enterpriseId: this.detailObj.enterpriseId,
          page: this.pageType,
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.authenticate_status {
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
  background-color: #fff;
  padding-left: 30px;
  padding-right: 60px;
  height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  &.fail {
    background-color: #FFF7F6;
    border: 1px solid #FF4D4F;
    border-radius: 12px;
    box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.10);
  }
  .name_box {
    display: flex;
    align-items: center;
    .name {
      color: #333;
      font-size: 24px;
      font-weight: 600;
      flex-shrink: 0;
    }
    .wait_status {
      padding: 0 10px;
      height: 30px;
      line-height: 26px;
      border-radius: 30px;
      border: 2px solid $theme;
      margin-left: 16px;
      color: $theme;
      font-size: 20px;
      flex-shrink: 0;
    }
    .success_status {
      height: 30px;
      margin-left: 16px;
      flex-shrink: 0;
      color: $theme;
      font-size: 20px;
      padding: 0 6px;
      height: 30px;
      border: 2px solid $theme;
      border-radius: 30px;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
    .fail_status {
      margin-left: 30px;
      display: flex;
      align-items: center;
      .fail_icon {
        display: block;
        width: 24px;
        height: 24px;
      }
      .fail_back {
        color: #FF4D4F;
        font-size: 20px;
        font-weight: 600;
        margin: 0 10px
      }
      .text {
        flex: 1 1 auto;
        color: #FF4D4F;
        font-size: 13px;
      }
    }
  }
  .btn {
    border-radius: 3px;
    font-weight: 500;
    margin-left: 60px;
  }
}
.mod {
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
  background-color: #fff;
  margin-bottom: 16px;
  padding-top: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .title {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left: 16px;
    .icon {
      display: block;
      width: 3px;
      height: 16px;
      background-color: $theme;
      margin-right: 5px;
    }
  }
  .content {
    padding: 40px 160px 40px 40px;
    .img_list {
      display: flex;
      padding-left: 80px;
      margin-bottom: 40px;
      &.last {
        margin: 0;
      }
      .img_item {
        .img_box {
          width: 340px;
          height: 214px;
        }
        .sign_box {
          width: 165px;
          height: 165px;
        }
        .img_box, .sign_box{
          position: relative;
          margin-right: 30px;
          .img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .mask {
            display: none;
          }
          &:hover {
            .mask {
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 2;
              background-color: rgba(0, 0, 0, 0.5);
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-size: 30px;
              font-weight: 600;
            }
          }
        }
        .name {
          margin-top: 20px;
          color: #333;
          font-size: 14px;
          font-weight: 600;
          text-align: center;
        }
      }
    }
    .sign {
      margin-bottom: 38px;
      padding-left: 80px;
      display: flex;
      .img_box {
        .img {
          display: block;
          width: 165px;
          height: 165px;
        }
        .name {
          margin-top: 20px;
          color: #333;
          font-size: 14px;
          font-weight: 600;
          text-align: center;
        }
      }
    }
    .msg_box {
      .row {
        margin-bottom: 38px;
        &:last-child {
          margin-bottom: 0;
        }
        .msg_line {
          display: flex;
          align-items: center;
          &.last {
            align-items: baseline;
            .value {
              line-height: 22px;
              height: auto;
            }
          }
          .key {
            width: 206px;
            height: 14px;
            color: #777;
            font-size: 14px;
            text-align: right;
            flex-shrink: 0;
          }
          .value {
            flex: 1 1 auto;
            color: #333;
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
